import React, { useState } from 'react';
import { Table, Button, Popconfirm, Input } from 'antd';
import './tableselect.scss';
import { useNavigate } from 'react-router-dom';
const { Search } = Input;
const SelectPage_zujian = () => {
  const [searchText, setSearchText] = useState('');
  const [pageSize, setPageSize] = useState(10);
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [selectedDelRowKeys, setselectedDelRowKeys] = useState([]);
  const navigate = useNavigate();
  const columns = [
    {
      title: '页', dataIndex: 'page', key: 'page', align: 'left', width: 100, render: (text) => (
        <span
          style={{ color: '#1890ff', cursor: 'pointer' }}
          onClick={() => navigate(`/page/${text}`)}
        >
          {text}
        </span>
      )
    },
    { title: '类型', dataIndex: 'type', key: 'type', align: 'left', width: 130 },
    { title: '组件名称', dataIndex: 'componentName', key: 'componentName', align: 'left', width: 150 },
    { title: '组件标签', dataIndex: 'componentLabel', key: 'componentLabel', align: 'left', width: 120 },
    { title: '序列', dataIndex: 'sequence', key: 'sequence', align: 'left', width: 80 },
    { title: '显示为', dataIndex: 'displayAs', key: 'displayAs', align: 'left', width: 100 },
    { title: '日期', dataIndex: 'date', key: 'date', align: 'left', width: 150 },
    { title: '更新者', dataIndex: 'updater', key: 'updater', align: 'left', width: 130 },
  ];
  const [originData, setOriginData] = useState([
    {
      key: '1', page: '2003', type: '页项', componentName: 'P2003_PROJECT', componentLabel: '项目',
      sequence: '20', displayAs: '单文本输入框', date: '2024/01/15 21:00', updater: '钱奕宣'
    },
    {
      key: '2', page: '2006', type: '页项', componentName: 'P2006_PROJECT', componentLabel: '用户名',
      sequence: '30', displayAs: '单文本输入框', date: '2024/01/30 21:00', updater: '李炎'
    },
    {
      key: '3', page: '9999', type: '区域', componentName: 'R9999_LOGIN', componentLabel: '登录区域',
      sequence: '10', displayAs: '表单', date: '2024/01/30 21:00', updater: '王云霞'
    },
    {
      key: '4', page: '2003', type: '页项', componentName: 'P2003_PROJECT', componentLabel: '项目',
      sequence: '20', displayAs: '单文本输入框', date: '2024/01/15 21:00', updater: '钱奕宣'
    },
    {
      key: '5', page: '2006', type: '页项', componentName: 'P2006_PROJECT', componentLabel: '用户名',
      sequence: '30', displayAs: '单文本输入框', date: '2024/01/30 21:00', updater: '李炎'
    },
    {
      key: '6', page: '9999', type: '区域', componentName: 'R9999_LOGIN', componentLabel: '登录区域',
      sequence: '10', displayAs: '表单', date: '2024/01/30 21:00', updater: '王云霞'
    },
    {
      key: '7', page: '2003', type: '页项', componentName: 'P2003_PROJECT', componentLabel: '项目',
      sequence: '20', displayAs: '单文本输入框', date: '2024/01/15 21:00', updater: '钱奕宣'
    },
    {
      key: '8', page: '2006', type: '页项', componentName: 'P2006_PROJECT', componentLabel: '用户名',
      sequence: '30', displayAs: '单文本输入框', date: '2024/01/30 21:00', updater: '李炎'
    },
    {
      key: '9', page: '9999', type: '区域', componentName: 'R9999_LOGIN', componentLabel: '登录区域',
      sequence: '10', displayAs: '表单', date: '2024/01/30 21:00', updater: '王云霞'
    },
    {
      key: '10', page: '2003', type: '页项', componentName: 'P2003_PROJECT', componentLabel: '项目',
      sequence: '20', displayAs: '单文本输入框', date: '2024/01/15 21:00', updater: '钱奕宣'
    },
    {
      key: '11', page: '2006', type: '页项', componentName: 'P2006_PROJECT', componentLabel: '用户名',
      sequence: '30', displayAs: '单文本输入框', date: '2024/01/30 21:00', updater: '李炎'
    },
    {
      key: '12', page: '9999', type: '区域', componentName: 'R9999_LOGIN', componentLabel: '登录区域',
      sequence: '10', displayAs: '表单', date: '2024/01/30 21:00', updater: '王云霞'
    },
  ]);
  const onSearch = (value) => {
    setSearchText(value);
  };
  const filteredData = originData.filter(item =>
    Object.values(item).some(value =>
      value && String(value).toLowerCase().includes(searchText.toLowerCase()) // 先检查 value 是否存在
    )
  );
  const handleDelete = () => {
    const newData = originData.filter(item => !selectedRowKeys.includes(item.key));
    setOriginData(newData);
    setselectedDelRowKeys(selectedRowKeys)
    setSelectedRowKeys('')
  };
  const onSelectChange = (newSelectedRowKeys) => {
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

  // 统一修改按钮：将选中的行数据传递给编辑页面
  const handleUnifiedEdit = () => {
    const selectedData = originData.filter(item =>
      selectedRowKeys.includes(item.key),
    );

    navigate('tableedit', {
      state: {
        selectedDelRowKeys: selectedDelRowKeys,
        selectedKeys: selectedRowKeys,
      }
    });
  };

  return (
    <div style={{ padding: '16px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div>
          <Button
            type="primary"
            onClick={handleUnifiedEdit}
            style={{ marginLeft: '5px', borderRadius: '3px', padding: '16px' }}
            disabled={selectedRowKeys.length === 0}
          >
            编辑所选页
          </Button>
          <Popconfirm
            title="确定要删除吗？"
            onConfirm={handleDelete}
            okText="是"
            cancelText="否"
          >
            <Button
              type="primary"
              style={{ marginLeft: '15px', borderRadius: '3px', padding: '16px' }}
              disabled={selectedRowKeys.length === 0}
            >
              删除所选页
            </Button>
          </Popconfirm>
        </div>
        
        {/* 搜索框靠右 */}
        <Search placeholder="搜索" onSearch={onSearch} style={{ width: 200, marginRight:'20px' }} />
      </div>
      <Table
        rowSelection={{ selectedRowKeys, onChange: setSelectedRowKeys }}
        columns={columns}
        bordered
        dataSource={filteredData}
        pagination={{
          pageSize,
          showSizeChanger: true,
          pageSizeOptions: ['10', '20', '50'],
          onShowSizeChange: (current, size) => setPageSize(size),
        }}
        className="custom-table"
        style={{ marginLeft: '5px', marginRight: '20px', marginTop: '16px' }}
      />
    </div>
  );
};

export default SelectPage_zujian;